<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2024-05-14 10:39:14
-->
<template>
  <el-switch v-model="values" class="ml-2" inline-prompt
    style="--el-switch-on-color: #409eff; --el-switch-off-color: #24a383" :active-text="stores.theme"
    :inactive-text="stores.theme" @change="changeTheme" />
  <div class="demoHtml w-[200px] h-[200px] bg-red-400 dark">2222</div>
  <formTest :formData="formData" :formRules="formRules" :formItemOption="formItemOption" @submit="submitForm" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useThemeTypeStore } from "@/stores/themeType.ts";
import { useTheme } from "@/utils/theme.ts";

const stores = useThemeTypeStore();
const values = ref(stores.theme === "light" ? false : true);

const changeTheme = async () => {
  await stores.changeThemeType(values.value);
};
onMounted(() => {
  useTheme(stores.changeThemeType(values.value));
});

// form star
interface FormData {
  name: string
  switch: boolean
  age: number
  selectV2: string

}
const formData = ref<FormData>({
  name: '',
  switch: false,
  age: 0,
  selectV2: '',
})
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const option = Array.from({ length: 1000 }).map((_, idx) => ({
  val: `Option ${idx + 1}`,
  lab: `${initials[idx % 10]}${idx}`,
}))
const formRules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' },],
  selectV2: [{ required: true, message: 'Please select Activity zone', trigger: 'change', },
  ],
});
const formItemOption = ref([
  { label: '姓名', prop: 'name', comType: 'input', optionsData: { type: 'text' } },
  { label: '开关', prop: 'switch', comType: 'switch', optionsData: {} },
  { label: '年龄', prop: 'age', comType: 'input', optionsData: { type: 'number', } },
  { label: '下拉框', prop: 'selectV2', comType: 'selectV2', optionsData: { type: 'number', options: option } },
  { label: '', prop: '', comType: 'button', optionsData: { type: 'primary', text: 'Submit', btnType: 'submit' } },
  { label: '', prop: '', comType: 'button', optionsData: { type: '', text: 'Resrt', btnType: 'reset' } },
]);


const submitForm = (formData: object) => {
  console.log(formData, 'kkkkkkkkkkkkkkkkk')
}
</script>

<style lang="scss" scoped></style>
